<template>
  <view>
    <view hover-class="luban-hover-class">指定按下去的样式类</view>
    <view hover-class="luban-hover-class" hover-start-time="500">按住后多久出现点击态</view>
    <view hover-class="luban-hover-class" hover-stay-time="1000">手指松开后点击态保留时间</view>

    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">
        flex-direction: row
        <text>\n横向布局</text>
      </view>
      <view class="luban-flex-row">
        <view class="luban-flex-item luban-bg-red">A</view>
        <view class="luban-flex-item luban-bg-green">B</view>
        <view class="luban-flex-item luban-bg-blue">C</view>
        <view class="luban-flex-item luban-bg-black">D</view>
      </view>
      <view style="display: flex;flex-direction: row-reverse;">
        <view class="luban-flex-item luban-bg-red">A</view>
        <view class="luban-flex-item luban-bg-green">B</view>
        <view class="luban-flex-item luban-bg-blue">C</view>
        <view class="luban-flex-item luban-bg-black">D</view>
      </view>
      <view class="uni-title uni-common-mt">
        flex-direction: column
        <text>\n纵向布局</text>
      </view>
      <view class="luban-flex-column">
        <view class="luban-flex-item luban-bg-red" style="flex:none;">A</view>
        <view class="luban-flex-item luban-bg-green" style="flex:none;">B</view>
        <view class="luban-flex-item luban-bg-blue" style="flex: none;">C</view>
      </view>
      <h2>flex-wrap: no-wrap</h2>
      <view style="display: flex;flex-direction: row;background: #f2f2f2;">
        <view class="luban-wh100" v-for="i in 4" :key="index">{{i}}</view>
      </view>
      <h2>flex-wrap: wrap</h2>
      <view style="display: flex;flex-direction: row;background: #ccddff;flex-wrap: wrap;">
        <view class="luban-wh100" v-for="i in 4" :key="index">{{i}}</view>
      </view>
      <h2>flex-wrap: wrap-reverse</h2>
      <view style="display: flex;flex-direction: row;background: #f2f2f2;flex-wrap: wrap-reverse;">
        <view class="luban-wh100" v-for="i in 4" :key="index">{{i}}</view>
      </view>
      <h2>justify-content:flex-start;</h2>
      <view style="display: flex;flex-direction: row;background: #ccddff;flex-wrap: wrap;justify-content:flex-start;">
        <view class="luban-wh100" v-for="i in 4" :key="index">{{i}}</view>
      </view>
      <h2>justify-content:flex-end;</h2>
      <view style="display: flex;flex-direction: row;background: #f2f2f2;flex-wrap: wrap;justify-content:flex-end;">
        <view class="luban-wh100" v-for="i in 4" :key="index">{{i}}</view>
      </view>
      <h2>justify-content:center;</h2>
      <view style="display: flex;flex-direction: row;background: #ccddff;flex-wrap: wrap;justify-content:center;">
        <view class="luban-wh100" v-for="i in 4" :key="index">{{i}}</view>
      </view>
      <h2>justify-content:space-between;</h2>
      <view style="display: flex;flex-direction: row;background: #f2f2f2;flex-wrap: wrap;justify-content:space-between;">
        <view class="luban-wh100" v-for="i in 4" :key="index">{{i}}</view>
      </view>
      <h2>justify-content:space-around;</h2>
      <view style="display: flex;flex-direction: row;background: #ccddff;flex-wrap: wrap;justify-content:space-around;">
        <view class="luban-wh100" v-for="i in 4" :key="index">{{i}}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "uc01-view"
}
</script>

<style scoped>
.luban-hover-class{
  background: #00AAFF;
  color:#fff;
}

.luban-flex-row{
  display: flex;
  flex-direction: row;
}
.luban-flex-item{
  flex:1;
  height:100rpx;
}
.luban-bg-red{
  background: #F76260;color:#FFF;
}
.luban-bg-blue{
  background: #00AAFF;color:#FFF;
}
.luban-bg-green{
  background:#09BB07; color:#FFF;
}
.luban-bg-black{
  background: #181a18; color:#FFF;
}
.luban-wh100{
  text-align: center;
  width: 100px;
  height:100px;
  line-height: 100px;
  font-size:24px;
  border:1px solid #320e0e;
  margin:4px;
}
.luban-flex-column{
  display: flex;
  flex-direction: column;
}
</style>
